<template>
	<view>
		<view class="zb">
			<text>直播间</text>
			<view class="zb_ul">
				<view class="zb_li" v-for="(item,i) in room_info" :key="i" @click="zhibo(item.roomid)">
					<view v-if="item.state" class="biaoti">
						正在直播中
					</view>
					<image class="zb_li_img" :src="item.share_img"></image>
					<view class="zb_li_view">
						<text class="zb_li_view_text">{{item.name}}</text>
						<view class="zb_li_view_img">
							<view v-for="items in item.goods" :key="items.goods_id" class="zb_li_view_img_view">
								<image class="zb_li_view_img_img" :src="items.cover_img" >	
								</image>
								
								<text class="zb_li_view_img_text">￥{{Number(items.price).toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData" margin-top="20"></u-loadmore>

		</view>
	</view>
</template>

<script>
	import http from "../../utils/http.js"
	import Cookies from '../../utils/Cookies.js'
	import HomeController from "../../api/HomeController.js"
	export default {
		data() {
			return {
				access_token: null,
				room_info: [],
				playback: [],
				customParams: encodeURIComponent(JSON.stringify({
					path: 'pages/index/index',
					pid: 1
				})),
				loadStatus: 'loadmore',
				room_start: 0,
			}
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中...'
			});
			let _this = this;
			this.addRandomData();
		},
		async onShow() {



		},
		methods: {
			async addRandomData() {
				if (this.loadStatus == 'loadmore') {
					
					await HomeController.getliveinfo(10,this.room_start).then(res=>{
						let data=JSON.parse(res.data.data);
						if (data.room_info != null && data.room_info != '' && data.room_info != 'undefined') {
						
							data.room_info.forEach(e => {
								let date=new Date().getTime()
								if(e.start_time<date&&e.end_time>date){
									e.state=true;
								}else{
									e.state=false;
								}
								e.goods.splice(1)
								this.room_info.push(e)
							})
						
							this.$nextTick(function(){
								uni.hideLoading()
							})
							this.room_start++;
						}
						if (data.room_info.length == 0 || data.room_info.length != 1) {
							this.loadStatus = 'nomore'
						} else {
							this.loadStatus = 'loadmore';
						}
					}).catch(err=>{
						
					})



				}

			},
			zhibo(id) {
				console.log(id)
				uni.navigateTo({
					url: "plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=" + id
				})
			},
			play(item) {
				console.log(11)
				item.playbackT = false;
				this.playback = this.playback;
			},
			pause(item) {
				console.log(22)
				item.playbackT = true;
				this.playback = this.playback;
			}
		},
		onReachBottom() {
			this.addRandomData()
		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style scoped>
	.zb {
		padding: 30rpx;
	}

	.zb_li {
		display: flex;
		background: #fff;
		width: 100%;
		height: 260rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.zb_li .biaoti{
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
		color: #fa3534;
		padding: 5rpx;
	}

	.zb_li .zb_li_img {
		width: 50%;
		height: 100%;
	}

	.zb_li .zb_li_view {
		width: 50%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;
	}

	.zb_li_view_text {
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 3;
		/** 显示的行数 **/
	}
	.zb_li_view_img{
		display: flex;
	}
	.zb_li_view_img_view{
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-right: 10rpx;
		border: 1px solid #fdf6ec;
	}
	.zb_li_view_img_img {
		width: 100%;
		height: 100%;
		
	}
	.zb_li_view_img_text{
		position: absolute;
		bottom: 0;
		left: 50%;
		color: #FFFFFF;
		
		-webkit-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.hf {
		padding: 30rpx;
	}

	.hf_ul {
		background: #fff;
		width: 100%;
		margin-top: 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.hf_ul_li {
		position: relative;
	}

	.hf_ul_li_text {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background-color: #aaaaff;
		width: 75rpx;
		height: 40rpx;
		z-index: 1000000;
		text-align: center;
		line-height: 40rpx;
		border-radius: 5rpx;
	}
</style>
